<template>
	<view class="so-plate animation-scale-up">
		<view class="so-plate-foot">
			<view class="so-plate-keyboard" :style="{height:keyboardHeight}">
				<view id="keyboard">
					<block v-if="inputType == 1">
						<view hover-class="hover" class="so-plate-key" v-for="el of provinceText" :key="el"
							:data-value="el" @tap="chooseKey">{{ el }}</view>
					</block>
					<block v-if="inputType == 1">
						<text class="so-plate-key fill-block"></text>
					</block>
					<block v-if="inputType >= 3">
						<view hover-class="hover" class="so-plate-key" v-for="el of numberText" :key="el"
							:data-value="el" @tap="chooseKey">{{ el }}</view>
					</block>
					<block v-if="inputType >= 2">
						<view hover-class="hover" class="so-plate-key" v-for="el of wordText" :key="el" :data-value="el"
							@tap="chooseKey">{{ el }}</view>
					</block>
					<block v-if="inputType == 3">
						<text v-for="el of fillBlock" :key="el.num" class="so-plate-key fill-block"></text>
					</block>
					<block v-if="inputType == 4">
						<view hover-class="hover" class="so-plate-key" v-for="el of lastWordText" :key="el"
							:data-value="el" @tap="chooseKey">{{ el }}</view>
					</block>
					<text v-if="inputType == 4" class="so-plate-key fill-block"></text>
				</view>
			</view>
			<view class="so-plate-btn-group">
				<view>
					<button class="so-plate-btn so-plate-btn--cancel" @tap="$emit('close')">取消</button>
				</view>
				<view>
					<button class="so-plate-btn so-plate-btn--delete" @tap="deleteKey">删除</button>
					<button class="so-plate-btn so-plate-btn--submit" @tap="exportPlate">完成</button>

				</view>

			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'uni-plate-input',
		data() {
			return {
				type: 2, //车牌类型
				currentInputIndex: 0, //当前编辑的输入框
				currentInputValue: ['', '', '', '', '', '', '', ''],
				fillBlock: [{
					num: 11
				}, {
					num: 12
				}, {
					num: 13
				}, {
					num: 14
				}, {
					num: 15
				}, {
					num: 16
				}], //避免:key报错
				keyboardHeightInit: false,
				keyboardHeight: 'auto',
				provinceText: [
					'粤',
					'京',
					'冀',
					'沪',
					'津',
					'晋',
					'蒙',
					'辽',
					'吉',
					'黑',
					'苏',
					'浙',
					'皖',
					'闽',
					'赣',
					'鲁',
					'豫',
					'鄂',
					'湘',
					'桂',
					'琼',
					'渝',
					'川',
					'贵',
					'云',
					'藏',
					'陕',
					'甘',
					'青',
					'宁',
					'新'
				],
				numberText: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
				wordText: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U',
					'V', 'W', 'X', 'Y', 'Z'
				],
				lastWordText: ['挂', '港', '学', '领', '警']
			};
		},
		props: {
			plate: {
				type: String,
				default: ''
			},
			index: {
				type: Number,
				default: 0
			}
		},
		computed: {
			//输入框类型
			inputType() {
				switch (this.currentInputIndex) {
					case 0:
						return 1;
						break;
					case 1:
						return 2;
						break;
					case 2:
						return 3;
						break;
					case 3:
						return 3;
						break;
					case 4:
						return 3;
						break;
					case 5:
						return 3;
						break;
					case 6:
						return 4;
						break;
					case 7:
						return 4;
						break;
					default:
						return 1;
						break;
				}
			}
		},
		watch: {
			currentInputIndex: function(n, o) {
				this.$emit('indexChange', n)
				if (!this.keyboardHeightInit) return
				this.$nextTick(() => {
					this.changeKeyboardHeight()
				})
			},
			index: {
				handler(n, o) {
					// console.log(n,o)
					this.currentInputIndex = n
				},
			}
		},
		methods: {
			chooseKey(e) {
				const {
					value
				} = e.currentTarget.dataset;
				this.$set(this.currentInputValue, this.currentInputIndex, value);
				this.$emit('chooseKey', value)
				if (this.type == 1 && this.currentInputIndex < 6) {
					this.currentInputIndex++
				}
				if (this.type == 2 && this.currentInputIndex < 7) {
					this.currentInputIndex++
				}
			},
			deleteKey() {
				this.$set(this.currentInputValue, this.currentInputIndex, '')
				this.$emit('chooseKey', '')
				if (this.currentInputIndex != 0) this.currentInputIndex--
			},
			exportPlate() {
				const plate = this.currentInputValue.join('')
				let err = false
				if (plate.length < 7 || !this.currentInputValue[0]) {
					err = true
				}
				if (err) return uni.showToast({
					title: '请输入完整的车牌号码',
					icon: 'none'
				})

				this.$emit('export', plate)
			},
			changeKeyboardHeight() {
				const that = this
				const query = uni.createSelectorQuery().in(this);
				query.select('#keyboard').boundingClientRect();
				query.exec(function(res) {
					if (res && res[0]) {
						that.keyboardHeight = res[0].height + uni.upx2px(30) + 'px'
						that.keyboardHeightInit = true
					}
				});
			}
		},
		mounted() {
			const plateKey = this.plate.split('')
			if (plateKey.length === 7 || plateKey.length === 8) {
				this.currentInputValue = plateKey
				this.currentInputIndex = plateKey.length - 1
			}

			setTimeout(() => { //在动画结束之后才开始获取
				this.$nextTick(() => {
					this.changeKeyboardHeight()
				})
			}, 500);
		}
	};
</script>
<style scoped lang="less">
	@import './uni-plate-input';
</style>